<template>
  <div class="subbigbox">
    <div class="leftbox">
      <el-input placeholder="输入关键字进行过滤" v-model="filterText" size="small" suffix-icon="el-icon-search">
      </el-input>
      <div class="treebox">
        <el-tree
          class="filter-tree"
          :highlight-current="true"
          @node-click="handleNodeClick"
          :data="data"
          node-key="id"
          :props="defaultProps"
          :filter-node-method="filterNode"
          ref="tree">
        </el-tree>
      </div>
    </div>
    <div class="rightbox">
      <div class="righttop">
        <span>
          <span class="spans">
            <el-radio-group v-model="form.dateType" size="small">
              <el-radio-button  label="1">日</el-radio-button>
              <el-radio-button  label="2">月</el-radio-button>
              <el-radio-button  label="3">年</el-radio-button>
            </el-radio-group>
          </span>
          <span class="spans">
              <el-date-picker v-if="form.dateType=='1'" v-model="form.value1" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" size="small" ></el-date-picker>
              <el-date-picker v-else-if="form.dateType=='2'" v-model="form.value2" type="month" value-format="yyyy-MM" placeholder="选择月" size="small" ></el-date-picker>
              <el-date-picker v-else v-model="form.value3" type="year" value-format="yyyy" placeholder="选择年" size="small" > </el-date-picker>
          </span>
        </span>
        <span><el-button size="small" type="primary" @click="submit">查 询</el-button></span>
      </div>
      <div class="rightbody">
        <div class="top">
          <div>分项用能报表</div>
          <div>
            <span v-show="treevalue.id">{{ treevalue.name }} {{ usertime }} 分项用电报表</span>
          </div>
          <div class="butti">
            <TopTile @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile>
          </div>
        </div>
        <div class="table">
          <TableColumn
          ref="tabledata"
          :tableData="tableData" 
          :tableConfig="tableConfig" 
          :issize="issize">
          </TableColumn>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getsubtreelistapi ,getsubdatalistapi} from '@/api/energy-consumption/Building-energy/Subitems-report'
import TopTile from '@/components/TopTitle/index.vue'
import TableColumn from '@/components/Table/index.vue'
import {exportexcel} from '@/utils/excel'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTile,
    TableColumn
  },
  data() {
    return {
      issize: 'medium',
      form:{dateType:'1'},
      filterText: '',
      defaultProps: {
          children: 'sonList',
          label: 'name'
      },
      usertime:'',
      data:[],
      treevalue: {},
      tableData: [],
      tableConfig: [
      { label: '序号', type:'index' ,center:'center',width:'100'},
        { label: '统计对象', prop: 'statisticalObjectName',center:'center' },
        { label: '明细', prop: 'detailsName' },
        { label: '日期', prop: 'dateString' ,center:'center'},
        { label: '用电量(kWh)', prop: 'usageValue' ,center:'right'},
        { label: '用电成本(元)', prop: 'usageCost' ,center:'right'},
        { label: '占比(%)', prop: 'rate' ,center:'right'},
      ]
    }
  },

  async mounted() {
    const { data: { entity: { sonList } } } = await getsubtreelistapi()
    this.data = sonList
    this.gettime()
    this.handleNodeClick(this.data[0])
  },

  methods: {
    submit() {
      if (!this.treevalue.id) return this.$message.warning('请先选择数据')
      this.getdatalist()
    },
    // 树节点点击
    handleNodeClick(val) {
      this.treevalue = val
      this.getdatalist()
    },
    // 获取表格数据
    async getdatalist() { 
      this.$refs.tabledata.loading=true
      const { name, id, type,pid } = this.treevalue
      this.usertime=this.form.dateType=='1'?this.form.value1:this.form.dateType=='2'?this.form.value2:this.form.value3
      const {data:{list}} = await getsubdatalistapi({
        name, treeId: id, treeType: type, dateType: this.form.dateType,parentId:pid,
        dateString:this.form.dateType=='1'?this.form.value1:this.form.dateType=='2'?this.form.value2:this.form.value3
      })
      this.tableData=list
      this.$refs.tabledata.loading=false
    },
    // 树节点过滤
    filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
    },
    // 获取当前时间戳
    gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month =mon<10?'0'+mon:mon
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() //日
      this.$set(this.form,'value3',year.toString())
      this.$set(this.form,'value2',year + '-' + month)
      this.$set(this.form,'value1',year+'-'+month+'-'+day)
    },
       // 调节表格密度
  command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 导出
    daochu() {
      const {name,id,type,pid}=this.treevalue
      exportexcel('ecm-microservice-biz/ecm/building/energy/report/subItem/exportExcel',{
        name, treeId: id, treeType: type, dateType: this.form.dateType,parentId:pid,
        dateString:this.form.dateType=='1'?this.form.value1:this.form.dateType=='2'?this.form.value2:this.form.value3
      },'分项能耗')
    },
    // 刷新列表
    shuaxin() {
      this.getdatalist()
      this.$message.success('列表刷新成功')
    },
  },
  watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    }
};   
</script>

<style scoped lang="scss">
.subbigbox{
  height: 100%;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  .leftbox{
    width: 300px;
    padding: 20px;
    background-color: #fff;
    height: 100%;
    margin-right: 10px;
    .treebox{
      height: 95%;
      overflow-y: auto;
    }
    .filter-tree{
      margin-top: 10px;
      /* height: 100% !important; */
    }
  }
  .rightbox{
    width: calc(100% - 310px);
    .righttop{
      height: 80px;
      padding: 0 20px;
      line-height: 80px;
      background-color: #fff;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      .spans{
        margin-right: 20px;
      }
    }
    .rightbody{
      height: calc(100% - 90px);
      background-color: #fff;
      padding: 20px;
      .top{
        display: flex;
        justify-content: space-between;
      }
      .table{
        height: 94%;
        margin-top: 10px;
      }
    }
  }
}
::v-deep .el-tree-node{
  height: 100%;
}
</style>